<template>
    <div>
        <!-- 视图 -->
        <router-view></router-view>

        <!-- 底部导航栏 -->
        <div >
            <van-tabbar v-model="active" route>
                <van-tabbar-item :to="item.go"  v-for="(item,index) in List">
                    <span>{{item.name}}</span>
                    <template #icon="props">
                        <img :src="props.active ? item.icon.active : item.icon.inactive" />
                    </template>
                </van-tabbar-item>

            </van-tabbar>

        </div>
    </div>
</template>

<script>
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
export default {
    setup() {
        //属性、方法
        //底部导航栏默认选中下标
        const active = ref(0)
        const route = useRoute()
        //底部导航栏
        const List = reactive([
            {
                name: "首页",
                icon: {
                    active:require('../assets/Home.png'),
                    inactive:require('../assets/Home2.png')
                },
                go:{name:'Home'}
            },
            {
                name: "菜单",
                icon: {
                    active:require('../assets/Menu.png'),
                    inactive:require('../assets/Menu2.png')
                },
                go:{name:'Menu'}
            },
            {
                icon: {
                    active:require('../assets/1.png'),
                    inactive:require('../assets/1.png')
                },
            },
            {
                name: "购物袋",
                icon: {
                    active:require('../assets/Shopbag.png'),
                    inactive:require('../assets/Shopbag2.png')
                },
                go:{name:'Shopbag'}
            },
            {
                name: "我的",
                icon: {
                    active:require('../assets/My.png'),
                    inactive:require('../assets/My2.png')
                },
                go:{name:'My'}
            }
        ])

       


        return { active,List,route }
    }
}
</script>

<style lang="less" scoped>


</style>